<template>
  <div class="container">
    <div class="rank">
      <p class="title">云音乐歌手榜</p>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="华语" name="first">
          <SingerRankTable :type="1"></SingerRankTable>
        </el-tab-pane>
        <el-tab-pane label="欧美" name="second">
          <SingerRankTable :type="2"></SingerRankTable>
        </el-tab-pane>
        <el-tab-pane label="韩国" name="third">
          <SingerRankTable :type="3"></SingerRankTable>
        </el-tab-pane>
        <el-tab-pane label="日本" name="fourth">
          <SingerRankTable :type="4"></SingerRankTable>
        </el-tab-pane>
      </el-tabs>
      <span class="time">更新时间：{{ updateTime | showDate }}</span>
    </div>
  </div>
</template>

<script>
import { getSingerRank } from '../../../network/songsranking.js'
import { formatTime } from '../../common/util.js'
import SingerRankTable from './SingerRankTable.vue'
export default {
  components: {
    SingerRankTable
  },
  data () {
    return {
      activeName: 'first',
      updateTime: 0
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    getSingerRank (type) {
      getSingerRank(type).then(res => {
        this.updateTime = res.data.list.updateTime
      })
    }
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatTime(date, 'MM月dd日')
    }
  },
  created () {
    this.getSingerRank(this.type)
  }
}
</script>

<style lang="less" scoped>
  .container {
    width: 82%;
    overflow: auto;
    .rank {
      position: relative;
      width: 95%;
      margin: 30px auto;
      p {
        margin-bottom: 20px;
        font-size: 25px;
      }
      .time {
        position: absolute;
        top: 65px;
        right: 0;
        color: #a48888;
      }
    }
  }
  /deep/ .el-tabs .el-tabs__item {
    font-size: 18px;
    // padding: 0 40px;
  }
</style>
